<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>模式选择页面</title>
	<style type="text/css">
		html{
			width:100%;
			height:88%;
		}
		body{
			width:99%;
			height:89%;
			background-image: url("img/qq.jpg");
		}
		#tile{
			margin: 0 auto;
			width: 100%;
			margin-top: 10%;
			font-size: 36px;
			color: #cc3399;
		}
		#d{
			margin: 0 auto;
			width: 33%;
			margin-top: 3%;
		}
		.btn{
			width: 30%;
			height: 100px;
			background:#1b85fd;
			color:BLACK;
			font-size: 22px;
		}
		#btn1{
			float:left;
			background:#ccff99;
		}
		#btn2{
			float:left;
			background:#ffff66;
		}
		#btn3{
			float:left;
			background:#ff6600;
		}
		.btn:hover{
			
		}
		
		#task{
			width:55%;
			height:88%;
			position: absolute;
			z-index: 3;
        	background-color: WHITE;
			top: 10%;
			left:23%;
			display:none;
		}
		#cover{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
	        height: 100%;
			background-color: #777;
	        z-index: 2;
	        display: none;
	        filter:alpha(Opacity=60);
	        -moz-opacity:0.6;
	        opacity: 0.6; 
	        border-style: solid;
			border-width: 1px;
	}
	</style>
	<script type="text/javascript">
	function stop(){
		return false;
		}
		document.oncontextmenu=stop;
	
		function allow(node){
			var btn = document.getElementById("yes");
			if(node.checked) btn.disabled = false;
			else btn.disabled = true;
		}
		function goInto(){
			document.getElementById("task").style.display = "none";
			document.getElementById("cover").style.display = "none";
		}
		function show(){
			document.getElementById("task").style.display = "block";
			document.getElementById("cover").style.display = "block";
		}
		function haveDone(){
			var btn = document.getElementById("btn3");
			btn.disabled = true;
			btn.value = "你没有待进行考试";
			btn.style.fontSize = "14px";
			btn.style.background = "GRAY";
			
		}
	</script>
</head>
<body>
	
	<div id="cover"></div>
	<div id="task">
		<center> <h2>写在前面的话</h2> </center>
		<br>
		<label>
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp很高兴与你的会面，我们已经期待很久了！我们在努力的将产品完善，但目前依然存在诸多问题，这可能会影响你的使用
			，但是我们希望你能将你在使用过程中遇到的问题及时的反馈给我们，以便我们将其修复。谢谢！<br>
			<span style="margin-left:70%">联系人：尹鹏博</span>
			<span style="margin-left:70%">电  话：13699364316</span>
			<span style="margin-left:70%">Q Q：1549138990</span>
		</label>
		<ol>
			<li>本系统面向广大数据库学习者，旨在提供一个在线的SQL语言学习平台，
			免去在物理机上安装数据库管理系统的麻烦，同时本系统提供有安卓客户端
			为学习者提供便捷及时的学习与练习。</li>
			<li>本系统所提供的功能完全满足SQL语句学习的需求。</li>
			<li>注册为本系统用户，将获得一个系统分配的数据库，库名将是你的用户名，这将是一个属于你的库，
			你在此库下拥有所有我能赋予你的权限。但是你的权利仅在此库下，这就意味着你将不能执行建库命令和新建用户命令。</li>
			<li>我们将尽量保护你存储在本系统数据库中的数据，但是现在处于测试阶段，意想不到的情况我们也是避免不了的。
			所以最好请备份你的数据，以免丢失，如若发生丢失，本系统不承担任何责任。</li>
		</ol>
		<input type="checkbox" onchange="allow(this)" style="list-style:inline">我已阅读本须知
		<input id="yes" type="button" disabled="true" style="margin-left:80%;width:15%;" onclick="goInto()" value="进入系统">
	</div>
<div>
	<div id="tile">
		<center><label>在线SQL学习工具</label></center>
	</div>

	<div id="d">
		<form action="index.jsp"><input id="btn1" class="btn" type="submit" name="practice" value="练习模式" onclick=""> </form> 
		<form action="showhomeworkList.view"><input id="btn2" class="btn" type="submit" name="homework" value="课后习题" onclick=""> </form> 
		<form action="examination.jsp"> <input id="btn3" class="btn" type="submit" name="Examination" value="参加考试" onclick="">  </form> 
	</div>
	<br>
</div>
<script> <%=request.getAttribute("callback") %> </script>
<script> <%=request.getAttribute("havaDone") %> </script>
</body>
</html>